<template>
  <div>
    <el-popover
      placement="right"
      offset="1"
      title="新增用户"
      width="800"
      trigger="click"
    >
      <div class="bigbox" popper-class="bigboxpoper">
        <div class="box">
          <label for=""
            >姓名:<el-input
              v-model="inputname"
              placeholder="请输入姓名"
            ></el-input
          ></label>
        </div>

        <div class="box">
          <label for=""
            >年龄:<el-input
              v-model="inputcity"
              placeholder="请输入年龄"
            ></el-input
          ></label>
        </div>

        <div class="box">
          <label for=""
            >年龄:<el-input
              v-model="inpiutprivence"
              placeholder="请输入年龄"
            ></el-input
          ></label>
        </div>

        <div class="box">
          <label for=""
            >地址:<el-input
              v-model="inputadders"
              placeholder="请输入地址"
            ></el-input
          ></label>
        </div>
        <div class="box">
          <label for=""
            >邮编:<el-input
              v-model="inputzip"
              placeholder="请输入邮编"
            ></el-input
          ></label>
        </div>

        <div class="box">
          <label for=""
            >出生日期:<el-date-picker
              v-model="inputdate"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker
          ></label>
        </div>
        <div class="tianjiabutton">
          <el-popover placement="top" width="160" v-model="visible">
            <p>这个新用户确定添加吗？</p>
            <div style="text-align: left; margin: 0">
              <el-button size="mini" type="text" @click="visible = false"
                >取消</el-button
              >
              <el-button type="primary" size="mini" @click="adduser"
                >确定</el-button
              >
            </div>
            <el-button slot="reference">添加</el-button>
          </el-popover>
        </div>
      </div>
      <el-button slot="reference" >新增用户+</el-button>
    </el-popover>
    <el-table
      :data="
        tableData.slice(pageSize * (currentPage - 1), currentPage * pageSize)
      "
      style="width: 1050px"
      max-height="500px"
    >
      <el-table-column fixed prop="date" label="日期" width="150">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="province" label="省份" width="120">
      </el-table-column>
      <el-table-column prop="city" label="市区" width="120"> </el-table-column>
      <el-table-column prop="address" label="地址" width="300">
      </el-table-column>
      <el-table-column prop="zip" label="邮编" width="120"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            type="text"
            size="small"
          >
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import paging from "../com/paging.vue";
export default {
  components: { paging },
  data() {
    return {
      visible: false,
      tableData: [],
      // 每页展示的数据条数
      pageSize: 5,
      // 当前的页码
      currentPage: 1,
      inputdate: "",
      inputname: "",
      inpiutprivence: "",
      inputcity: "",
      inputadders: "",
      inputzip: "",
    };
  },
  methods: {
    // 删除
    deleteRow(index, rows) {
      this.$store.commit("delet", index);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      console.log(`每页 ${val} 条`, this.pageSize);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      console.log(`当前页: ${val}`, this.currentPage);
    },
    adduser() {
      this.visible = false;
      this.newarr = {
        date: this.inputdate.toLocaleDateString(),
        name: this.inputname,
        province: this.inpiutprivence,
        city: this.inputcity,
        address: this.inputadders,
        zip: this.inputzip,
      };
      this.$store.commit("Adduser", this.newarr);
    },
  },
  mounted() {
    // 接收数据
    this.tableData = this.$store.state.tableData;
  },
};
</script>
<style>
.tianjiabutton {
  margin-top: 36px;
  /* margin-left: 360px; */
}

.bigbox {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}

.box {
  line-height: 20px;
  padding: 30px;
}

.el-button {
  padding: 10px 12px;
}

.el-input {
  width: 160px;
}

.inputsolt {
  margin-left: 900px;
  margin-top: -40px;
}

.el-pagination {
  margin-left: 600px;
  margin-top: 20px;
}
</style>